<template>
  <div>
    <h2>Acom</h2>
    <!-- <h1>{{ $store.state.num }}</h1> -->
    <h1>{{ num }}</h1>
    <!-- <h2>{{ $store.getters.evenOrOdd }}</h2> -->
    <h2>{{ evenOrOdd }}</h2>
    <button @click="add">加1</button><br />
    <!-- 需求：收集input中的数据，例如input 输入5  state.num-5
    需要v-modle收集数据 收集之后将其传入到mutations jian
     -->
    <input type="text" v-model="count" />
    <button @click="jian">减1</button><br />
    <button @click="oddAdd">如果是奇数+1</button><br />
    <button @click="evenJian">如果是偶数-1</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$store);
    console.log(this.$store.state.num);
  },
  data() {
    return {
      count: 0,
    };
  },
  //   在computed中可以调用state和getters当中的值进行处理
  computed: {
    //
    num() {
      return this.$store.state.num;
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd;
    },
  },
  methods: {
    add() {
      //   目的给state当中num + 1
      //  在组件Acom当中触发mutations中的add,更改state中num的值
      //在组件当中触发mutations通过commit($store.commit)  commit() 参数1：mutations中的函数的名字,
      //   参数2 要传递的参数
      //   this.$store.commit("add", 'hanhan');
      //   当传递多个值时，需要用对象的方式传递
      this.$store.commit("add", { name1: "hanhan", name2: "lele" });
    },
    jian() {
      // 做减法 state num-1
      this.$store.commit("jian", { count: this.count });
    },
    oddAdd() {
      // 如果是奇数 需要state.num +1
      //   调用actions中的方法  dispatch 组件通过this.$store.dispatch触发了actions当中的oddAdd
      this.$store.dispatch("oddAdd", { name1: "hanhan", name2: "lele" });
    },
    evenJian() {
      this.$store.dispatch("evenJian", { count: 5 });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>